<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #666;
        }
        .box{
            width: 500px;
            padding: 70px;
            margin: 300px auto; 
            text-align: center;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></br>
        <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></br>
        <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></br>
        <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></br>
        <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></br>
    </div>
</body>

<script>
        let body = document.body
        //鼠标按下
        body.onmousedown = function(){
            let checkboxList = document.querySelectorAll('input')   //获取全部input元素
            let isDown = true   //是否按下  true按下  false松开
            
            //获取event对象实例  拿到鼠标按下时的坐标
            let event = window.event        
            let startX = event.clientX || event.x    
            let startY = event.clientY || event.y

            //创建框选元素
            let divFrame = document.createElement('div')
            divFrame.style.cssText = `position:absolute;left:${startX};top:${startY};width:0px;height:0px;padding:0;margin:0;border:2px dashed  #333;z-index:999;display:none`
            body.appendChild(divFrame)


            //根据坐标修改divFrame状态
            let newX,newY = null


            //移动鼠标
            body.onmousemove = function(){
                let e = window.event        //获取event对象实例
                if(isDown){ 
                    if(divFrame.style.display == 'none'){
                        divFrame.style.display = ''
                    }
                    newX =  e.clientX || e.x
                    newY = e.clientY || e.y

                    //更新状态
                    divFrame.style.left = Math.min(startX,newX) + 'px'
                    divFrame.style.top  = Math.min(startY,newY) + 'px'
                    divFrame.style.width = Math.abs(newX - startX) + 'px'
                    divFrame.style.height = Math.abs(newY - startY) + 'px'

                    //获取divFrame坐标、宽高
                    let _left = divFrame.offsetLeft
                    let _top = divFrame.offsetTop
                    let _width = divFrame.offsetWidth
                    let _height = divFrame.offsetHeight
                    
                    //判断是否被框选
                    checkboxList.forEach(item => {
                        let sl = item.offsetLeft + item.offsetWidth
                        let st = item.offsetTop + item.offsetHeight

                        if(sl > _left && st >_top && item.offsetLeft < _left + _width && item.offsetTop < _top + _height){
                            item.checked = true
                        }
                    });
                }
                
            }
            //鼠标松开
            document.onmouseup = function(){
                isDown = false
                if(divFrame){
                    document.body.removeChild(divFrame)
                }
            }
            //点击其他地方重置
            checkboxList.forEach(item=>{
                item.checked = false
            })
        }
</script>
</html>